<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>订单查询</title>
	<meta name="viewport"
		  content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" th:href="@{/css/oksub.css}">
	<script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
</head>
<body>
<div class="ok-body">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form" lay-filter="searchForm">

			<div class="layui-inline">
				<label class="layui-form-label">订单编号</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" name="orderid"
						   placeholder="请输订单编号"/>
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">寄件电话</label>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" name="sendTel"
						   placeholder="请输寄件电话"/>
				</div>
			</div>

			<div class="layui-inline">
			<label class="layui-form-label">收件电话</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input" name="receiveTel"
					   placeholder="收件电话"/>
			</div>
		</div>


			<div class="layui-inline">
				<label class="layui-form-label">录单状态</label>
				<div class="layui-input-block">
					<select name="paymentMethodId" class="layui-select" lay-filter="paymentMethodId"
							lay-verify="required" lay-search="true">
						<option value="">请选择状态</option>
						<option value="1">扫描完毕</option>
						<option value="2">未扫描完毕</option>
					</select>
				</div>
			</div>

			<div class="layui-inline">
				<a class="layui-btn search_btn" data-type="reload">搜索</a>
			</div>

		</form>
	</blockquote>
	<!--数据表格-->
	<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script th:src="@{/lib/layui/layui.js}"></script>
<script th:inline="none">
	layui.use(["element", "jquery", "table", "form", "laydate", "okLayer", "layer",
		"okUtils", "okMock"], function () {
		 table = layui.table;
		 form = layui.form;
		layer = layui.layer;
		 laydate = layui.laydate;
		 okLayer = layui.okLayer;
		 okUtils = layui.okUtils;
		 okMock = layui.okMock;
		 $ = layui.jquery;

		laydate.render({
			elem: "#startTime",
			type: "datetime"
		});
		laydate.render({
			elem: "#endTime",
			type: "datetime"
		});
		okLoading.close($);
		var userTable = table.render({
			elem: '#tableId',
			url: "/api/orderList/list",
			page: true,
			toolbar: true,
			toolbar: "#toolbarTpl",
			size: "sm",
			cols: [[{
				type: "checkbox",
				fixed: "left"
			}, {
				field: "orderid",
				title: "运单编号",
				width: 100,
				sort: true
			},  {
				field: "assignBranchStaffName",
				title: "调派网点员工",
				width: 150
			}, {
				field: "caseNumber",
				title: "件数",
				width: 150
			}, {
				field: "weight",
				title: "重量",
				width: 150
			}, {
				field: "recipients",
				title: "收件人",
				width: 100
			}, {
				field: "recipientProvince",
				title: "收件省",
				width: 100
			}, {
				field: "recipientCity",
				title: "收件市",
				width: 100
			}, {
				field: "recipientArea",
				title: "收件区",
				width: 100
			}, {
				field: "recipientAddress",
				title: "收件地址",
				width: 100
			}, {
				field: "sender",
				title: "寄件人",
				width: 100
			}, {
				field: "province",
				title: "寄件人省",
				width: 100
			}, {
				field: "city",
				title: "寄件人市",
				width: 100
			}, {
				field: "area",
				title: "寄件人区",
				width: 100
			}, {
				field: "address",
				title: "寄件地址",
				width: 100
			}, {
				field: "addtime",
				title: "添加时间",
				width: 100
			}, {
				title : '录入状态',
				width : 130,
				templet : function(d) {
                    if (d.catalogueState == "1") {
                        return "未扫描完毕";
                    }else if(d.catalogueState == "2"){
                        return "扫描完毕";
                    }else if(d.catalogueState == "3"){
                        return "已派件";
                    }else if(d.catalogueState == "4"){
                        return "已签收"
                    }
					return '';
				}
			}, {
				field: "waybillId",
				title: "运单编号",
				width: 100
			}]],
			done: function (res, curr, count) {
				console.info(res, curr, count);
			}
		});

		form.on("submit(search)", function (data) {
			userTable.reload({
				where: data.field,
				page: {
					curr: 1
				}
			});
			return false;
		});


	})
</script>

</body>
</html>
